<template>
  <div class="container" @dblclick="revertChart">
    <div class='main' ref="map"></div>
  </div>
</template>

<script>
import config from '@/config'
import { getChina, getProvince } from '@/api'
import { getpinyin } from '@/utils/map_utils'
import { mapState } from 'vuex'

export default {
  name: 'Map',
  data() {
    return {
      chart: null,
      data: null,  // 散点图数据
      titleSize: 0, // 标题字体大小,
      mapData: [], // 地图数据
      counter: 0, // 记录是否单击地图  进入省份  0 全地图 1 省份
      ws: null
    }
  },
  created() {
    this.ws = this.$ws.getInstance()
    // 注册回调函数 等服务器回应后调用
    this.ws.registerCallback('mapData', this.getData)
  },
  mounted() {
    this.initChart()
    // this.getData()

    window.addEventListener('resize', this.adaptChart)
  },
  destroyed() {
    window.removeEventListener('resize', this.adaptChart)
    this.ws.unRegisterCallback('mapData')
  },
  computed: {
    ...mapState(['theme'])
  },
  watch: {
    theme() {
      this.chart.dispose()
      this.initChart()
      this.updateChart()
       this.$nextTick(() => {
        this.adaptChart()
      })
    }
  },
  methods: {
    async initChart() {
      let chinaRes = await getChina()   // 地图暂时不做处理 可以在socketType 多加一种  也可以放在前端本地
      this.mapData['china'] = chinaRes.data
      // 基于准备好的dom，初始化echarts实例
      this.chart = this.$echarts.init(this.$refs.map, this.theme)
      this.$echarts.registerMap('china', chinaRes.data);
      let option = {
        title: {
          left: 20,
          top: 20,
          text: '▎' + config.title['map'],
          textStyle: {
          }
        },
        grid: {
          top: '25%',
          left: '5%',
          right: '5%',
          bottom: '5%',
          containLabel: true
        },
        color: ['#16F2D9', '#2C6EFF', '#0BA82C'],
        legend: {
          show: true,
          icon: "circle",
          textStyle: {
            color: '#999',
          },
          orient: 'vertical',
          left: 20,
          bottom: 40
        },
        //配置地理坐标系组件
        geo: {
          type: 'map',
          map: 'china',
          roam: true, //设置允许缩放以及拖动的效果,
          label: {
            show: true,
            color: '#fff'
          },
          itemStyle: {
            areaColor: '#2E72BF',
            borderColor: '#2F3F51'
          },

        },
      }
      // 绘制图表
      this.chart.setOption(option)
      // 发送服务器请求
      // console.log('object');
      this.ws.send(JSON.stringify({
        action: 'getData',
        socketType: 'mapData',
        chart: 'map',
        value: ''
      }))

      // 绑定地图单击事件
      this.chart.on('click', async arg => {
        if (this.count == 1) return
        this.count = 1
        let name = getpinyin(arg.name)
        // 判断是否点击过当前板块 缓存数据
        if (!this.mapData[name]) {
          let provinceRes = await getProvince(name)
          this.mapData[name] = provinceRes.data
        }

        this.$echarts.registerMap(name, this.mapData[name])
        let provinceOption = {
          geo: {
            map: name
          }
        }
        this.chart.setOption(provinceOption)

      })
    },
    getData(data) {
      // console.log(data);
      // let res = await getMap()
      // this.data = res.data
      this.data = data
      this.updateChart()
      this.adaptChart()
    },
    updateChart() {

      let series = this.data.map(item => {
        return {
          name: item.name,
          type: 'effectScatter',
          data: item.children,
          coordinateSystem: 'geo',
          rippleEffect: {
            scale: 10,
            brushType: 'stroke'
          }
        }
      })

      let dataOption = {
        series
      }
      this.chart.setOption(dataOption)
    },

    adaptChart() {
      this.chart.resize()
      this.titleSize = this.$refs.map.offsetWidth / 100 * 3.6
      let adaptOption = {
        title: {
          textStyle: {
            fontSize: this.titleSize
          }
        },
        legend: {
          itemGap: this.titleSize / 2,
          itemWidth: this.titleSize,  // 设置宽度
          itemHeight: this.titleSize, // 设置高度
          textStyle: {
            fontSize: this.titleSize / 1.5,
          }
        }
      }
      // 绘制图表
      this.chart.setOption(adaptOption)
    },
    revertChart() {
      this.count = 0
      let revertOption = {
        geo: {
          map: 'china'
        }
      }
      this.chart.setOption(revertOption)
    }

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
</style>
